<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>搜索详情</title>
		<!-- bootstrap css -->
<!--		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">-->
		<!-- style css -->
<!--		<link rel="stylesheet" type="text/css" href="css/style.css">-->
		<!-- Responsive-->
<!--		<link rel="stylesheet" href="css/responsive.css">-->
		<!-- Scrollbar Custom CSS -->
<!--		<link rel="stylesheet" href="css/jquery.mCustomScrollbar.min.css">-->
		<style type="text/css">
			.background{
				width: 100%;
				height: 1000px;
				background-color: #030303;
			}
			.title{
				margin-left: 700px;
				color: aliceblue;
			}
			.row{
				width: 1300px;
				height: 250px;
				margin-left: 100px;
				display: flex;
				flex-direction:row ;
				margin-top: 50px;

			}
			.box1{
				width: 200px;
				height:100%;
				display: flex;
				flex-direction: column;
				margin-left: 40px;

			}
			.img{
				width: 200px;
				height: 200px;
				margin-top: 10px;
			}
			.img_attribute{
				width: 200px;
				height: 200px;
				border-radius: 5px;
			}
			.text{
				width: 200px;
				height: 10px;
				color: beige;
				margin-top: 2px;
				margin-left: 55px;
			}
			.button{
				width: 100px;
				height: 30px;
				border-radius: 10px;
			}
			.box_inside{
				display: flex;
				flex-direction: row;
				width: 200px;
				height: 30px;
			}
			.tabcollect{
				width:30px ;
				height: 30px;
				margin-left:50px;

			}
			.img_collection{
				width:30px ;
				height: 30px;
				border-radius: 50px;
			}

		</style>
		<style>
			.search_box{
				padding: 15px;
				width: 300px;
				margin: 0 auto;
			}
			.search_box input[type='text']{
				width: 180px;
				height: 26px;
				font-size: 14px;
				margin: 0;
			}
			.search_box input[type='button']{
				padding: 5px 13px;
				font-size: 14px;
			}
			input[type="button"] {
				width: 80px;
				padding: 3%;
				margin-bottom: 8%;
				background: #21A957;
				font-family: 'Open Sans', sans-serif;
				color: #ECECEC;
				box-shadow: inset 0px 0px 10px #666464;
				-webkit-text-shadow: 0px 0px 3px #000;
				-moz-text-shadow: 0px 0px 3px #000;
				-o-text-shadow: 0px 0px 3px #000;
				-ms-text-shadow: 0px 0px 3px #000;
				font-size: 20px;
				outline: none;
				border: none;
				cursor: pointer;
				font-weight: 500;
				border-radius: 5px;
				transition: 0.5s;
				-webkit-appearance: none;
				-webkit-transition: 0.5s;
				-moz-transition: 0.5s;
				-o-transition: 0.5s;
				-ms-transition: 0.5s;
			}

			input[type="button"]:hover {
				background: #128A42;
				color: #fff;
			}

		</style>

	</head>
	<body>
		<div class="background">
			<div class="search_box">
				<input type="text" name="key" id="key">
				<input type="button" onclick="yuyin()" id="search-btn" value="语音输入">
				<input type="button" onclick="ss()" id="search-btn1" value="搜索">
			</div>
<!--			<div class="search_icon"><input type="text" id="searchInput" placeholder="search"></div>-->
<!--			<div class="search_icon"><a href="#" onclick="search()"><img src="images/search-icon.png"><span class="padding_left_15">Search...</span></a></div>-->

			<h1 class="title">搜索结果</h1>
			<div id="group"></div>
		</div>

		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>


		<script>

			function yuyin(){
				$.get("/call",function(data,status){
				});
			}


			$(function() {
				var ws = new WebSocket('ws://localhost:8080/websocket/1');
				// 连接成功时:
				ws.addEventListener('open', function (event) {
					console.log('websocket connected.连接成功');
				});
				// 收到消息时:
				ws.addEventListener('message', function (event) {
					var msg = event.data;
					$("#key").val(msg);
					console.log("页面接收到消息："+msg);
				});
				// 连接关闭时:
				ws.addEventListener('close', function () {
					console.log('websocket closed.');
				});
				// 绑定到全局变量:
				window.chatWs = ws;
			});



			function ss(){
				$('#group').html('')

				$.ajax({
					url:'app/list',
					data:{
						"name":$('#key').val()
					},
					success:res=>{
						if (res.length<1){
							alert('搜索无结果')
						}
						let html = `<div class="row">`;
						for(let i = 0; i<res.length;i++){
							let r = res[i]
							if (i>0 && i%5==0){
								html+=`</div><div class="row">`
							}
							html+=`
                        <div class="box1">
                            <div class="img"><img src="${r.img}" class="img_attribute"/></div>
                            <h3 class="text">${r.name}</h3>
                            <div class="box_inside">
                                <button type="button" class="button">点击下载</button>
                                <div class="tabcollect"><img src="https://img-blog.csdnimg.cn/e8eb83b0a09d4c2dab5cc9aa454101ce.png" class="img_collection"></div>
                            </div>
                        </div>`;

						}
						$('#group').append(html+`</div>`)
					},
					error:res=>{
						alert('搜索失败')
					}
				})
			}
		</script>
	</body>
</html>
